<template>
	<view class="container">
		<page-nav class="custom-title" title="搜索" :leftShow="true" :forcego="true"> </page-nav>		
		<view class="tab">
			<u-tabs :list="tabs" :is-scroll="false" :current="current" active-color="#2979ff" inactive-color="#595959"
				height="100" @click="change"></u-tabs>
		</view>

		<swiper id="swiperBox" :style="{ height: swiperHeight + 'px' }" :current="current" @change="tabsChange">
			<swiper-item class="swiper-item" v-for="(pitem, pindex) in tabs" :key="pindex">
				<scroll-view scroll-y style="width: 100%;height: 100%;" refresher-enabled
					:refresher-triggered="pitem.triggered" @scrolltolower="onreachBottom"
					@refresherrefresh="refresherrefresh(pindex)" @refresherrestore="refresherrestore(pindex)"
					@refresherabort="refresherabort(pindex)">					
					<view style="padding: 0rpx 30rpx 0rpx 30rpx;">					 					
						<view style="display: flex;">
							<view style="min-width: 115rpx;">类型：</view>
							<view style="width: 100%;">
								<u-scroll-list  style="padding-right: 60px;" :indicator="flag">
									<view class="btn" :class="{activebtn:selparam1===index}"
										v-for="(item,index) in param1" @click="slect1(index)">{{item.dictValue}}</view>
								</u-scroll-list>
							</view>
						</view>
						
						<view style="display: flex;">
							<view style="min-width: 115rpx;">期限：</view>
							<view style="width: 100%;  ">
								<u-scroll-list style="padding-right: 60px;" :indicator="flag">
									<view class="btn" :class="{activebtn:selparam2===index}"
										v-for="(item,index) in param2" @click="slect2(index)">{{item.dictValue}}</view>								 
								</u-scroll-list>
							</view>
						</view>
						<view style="display: flex;">
							<view style="min-width: 115rpx;">额度：</view>
							<view style="width: 100%;">
								<u-scroll-list  style="padding-right: 60px;" :indicator="flag">
									<view class="btn" :class="{activebtn:selparam3===index}"
										v-for="(item,index) in param3" @click="slect3(index)">{{item.dictValue}}</view>
								</u-scroll-list>
							</view>
						</view>
						
						<view style="display: flex;">
							<view style="min-width: 115rpx;">利率：</view>
							<view style="width: 100%;">
								<u-scroll-list  style="padding-right: 60px;" :indicator="flag">
									<view class="btn" :class="{activebtn:selparam4===index}"
										v-for="(item,index) in param4" @click="slect4(index)">{{item.dictValue}}</view>
								</u-scroll-list>
							</view>
						</view>

						<view style="display: flex;">
							<view style="min-width: 115rpx;">还款：</view>
							<view style="width: 100%;">
								<u-scroll-list  style="padding-right: 60px;" :indicator="flag">
									<view class="btn" :class="{activebtn:selparam6===index}"
										v-for="(item,index) in param6" @click="slect6(index)">{{item.dictValue}}</view>
								</u-scroll-list>
							</view>
						</view>
						
						<view style="display: flex;">
							<view style="min-width: 115rpx;">热度：</view>
							<view style="width: 100%;">
								<u-scroll-list  style="padding-right: 60px;" :indicator="flag">
									<view class="btn1" :class="{activebtn:selparam5===index}"
										v-for="(item,index) in param5" @click="slect5(index)">{{item.dictValue}}</view>
								</u-scroll-list>
							</view>
						</view>

					</view>

					<view class="content">
						<view class="news-list">								
							<navigator :url="`/pages/phjr/phjrinfo?id=${item.id}`" hover-class="none" class="news-item"
								v-for="(item, index) in  contentList[pindex].list" :key="index">
								<view>									
									<image :src="item.photo!==''?item.photo:defaultImage" class="img" />
									<view class="lab" > {{item.shot}}</view>
								</view> 
								<view class="left">
									<view class="info">
										{{item.title}}
									</view>
									<view class="atag">
										<span style="color: #FA612C; background-color: #FA612C33;  font-weight: 500;  padding: 0rpx 10rpx 0rpx 10rpx; margin-right: 10rpx;">{{item.repaymentStr}}</span>										
										<span style="color: #1057FC;  padding: 0rpx 10rpx 0rpx 10rpx; font-weight: 500; background-color: #1057FC33;">{{item.loanTypeStr}}</span>
										 
									</view>
									<view class="date">										 
											<view style="text-align: center;">
												<view  class="lab" >{{ item.interestRate}}% </view>	 
												<view style="white-space: nowrap;">融资利率</view>	   
											</view>
											<view style="text-align: center;">
												<view class="lab" >{{ item.financingPeriodStr}}</view>	 
												<view style="white-space: nowrap;">融资期限</view>	   
											</view style="text-align: center;">
											<view style="text-align: center;">
												<view class="lab" >{{ item.financingLimitStr}}</view>	 
												<view style="white-space: nowrap;">融资额度</view>	   
											</view> 
										 
									</view>
								</view>
							 
							</navigator>
						</view>
						<view class="nomore">
							<u-loadmore :status="contentList[pindex].status" />
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper> 
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import {
		rzdict,
		rzproductlist 
	} from '@/api/mock/home.js'
	export default {
		data() {
			return {
				swiperHeight: 0,
				tabs: [{
						name: '金融服务',
						triggered: false,
						_triggered: false,
					},
					{
						name: '担保服务',
						triggered: false,
						_triggered: false,
					},
					{
						name: '保理服务',
						triggered: false,
						_triggered: false,
					},
					{
						name: '供应链服务',
						triggered: false,
						_triggered: false,
					},
					{
						name: '股权质押',
						triggered: false,
						_triggered: false,
					},
					{
						name: '设备租赁',
						triggered: false,
						_triggered: false,
					},
					{
						name: '普惠产品',
						triggered: false,
						_triggered: false,
					},
					{
						name: '星瑞滴灌',
						triggered: false,
						_triggered: false,
					},

				],
				contentList: [{
						list: [],
						page: 1,
						pages: 1,
						infoType: 1,
						status: 'loadmore'
					},
					{
						list: [],
						page: 1,
						pages: 1,
						infoType: 2,
						status: 'loadmore'
					},
					{
						list: [],
						page: 1,
						pages: 1,
						infoType: 3,
						status: 'loadmore'
					},
					{
						list: [],
						page: 1,
						pages: 1,
						infoType: 4,
						status: 'loadmore'
					},
					{
						list: [],
						page: 1,
						pages: 1,
						infoType: 4,
						status: 'loadmore'
					},
					{
						list: [],
						page: 1,
						pages: 1,
						infoType: 4,
						status: 'loadmore'
					},
					{
						list: [],
						page: 1,
						pages: 1,
						infoType: 4,
						status: 'loadmore'
					},
					{
						list: [],
						page: 1,
						pages: 1,
						infoType: 4,
						status: 'loadmore'
					}
				],
				param1: [{
					dictKey: '',
					dictValue: '全部'
				}],
				param2: [{
						dictKey: '1,2,3,4,5',
						dictValue: '全部'
					},
					{
						dictKey: '1',
						dictValue: '≤3个月'
					},
					{
						dictKey: '2',
						dictValue: '≤6个月'
					},
					{
						dictKey: '3',
						dictValue: '≤12个月'
					},
					{
						dictKey: '4',
						dictValue: '≤24个月'
					},
					{
						dictKey: '5',
						dictValue: '≤36个月'
					},					
					{
						dictKey: '6',
						dictValue: '≤60个月'
					},
					{
						dictKey: '7',
						dictValue: '≤120个月'
					},
					
				],
				param3: [{
						dictKey: '1,2,3,4,5',
						dictValue: '全部'
					},
					{
						dictKey: '1',
						dictValue: '≤100万'
					},
					{
						dictKey: '2',
						dictValue: '≤200万'
					},
					{
						dictKey: '3',
						dictValue: '≤300万'
					},
					{
						dictKey: '4',
						dictValue: '≤500万'
					},
					{
						dictKey: '5',
						dictValue: '≤1000万'
					},					 
					{
						dictKey: '6',
						dictValue: '≤2000万'
					},					 
					{
						dictKey: '7',
						dictValue: '≤3000万'
					},					
					{
						dictKey: '8',
						dictValue: '≤5000万'
					},					
					{
						dictKey: '9',
						dictValue: '≤10000万'
					}
				],
				param4: [{
						dictKey: null,
						dictValue: '全部'
					},
					{
						dictKey: '0,4.35',
						dictValue: '0%~4.35%'
					},
					{
						dictKey: '4.35,5.22',
						dictValue: '4.35%~5.22%'
					},
					{
						dictKey: '5.22,6.25',
						dictValue: '5.22%~6.25%'
					},
					{
						dictKey: '6.25,8.7',
						dictValue: '6.25%~8.7%'
					},
					{
						dictKey: '8.7,12',
						dictValue: '8.7%~12%'
					}
				],
				param5: [{
						dictKey: '1,2,3,4,5',
						dictValue: '全部'
					},
					{
						dictKey: '1',
						dictValue: '★'
					},
					{
						dictKey: '2',
						dictValue: '★★'
					},
					{
						dictKey: '3',
						dictValue: '★★★'
					},
					{
						dictKey: '4',
						dictValue: '★★★★'
					},
					{
						dictKey: '5',
						dictValue: '★★★★★'
					}
				],
				param6: [{
						dictKey: '1,2,3,4,5',
						dictValue: '全部'
					},
					{
						dictKey: '1',
						dictValue: '等额本息'
					},
					{
						dictKey: '2',
						dictValue: '先息后本'
					},
					{
						dictKey: '3',
						dictValue: '等额本金'
					},
					{
						dictKey: '4',
						dictValue: '等本等息'
					},
					{
						dictKey: '5',
						dictValue: '随借随还'
					},
					{
						dictKey: '5',
						dictValue: '其他'
					}
				],
				selparam1: 0,
				selparam2: 0,
				selparam3: 0,
				selparam4: 0,
				selparam5: 0,
				selparam6: 0,
				current: 0,
				flag: false,
				defaultImage: 'https://www.xrskfw.com/static/images/home/def.png', // 默认图片地址
			};
		},
		onLoad() {
			 
			this.param1=[{
					dictKey: '',
					dictValue: '全部'
				}];
			rzdict({ code: 'dkfw' }).then(res => {
			    const data = res.data;    					
					let allitems=[];
			       data.forEach((item)=>{
			           console.log(`output->item`,item)
			           allitems.push(item.dictKey);
			       })         
				   this.param1 = this.param1.concat(data);
			       this.param1[0].dictKey = allitems.join(',');   
			   });
			
			let tabidx=1;
			switch(this.current){
				case 0:
				tabidx = 7;
				break;
				case 1:
				tabidx = 8;
				break;
				case 2:
				tabidx = 3;
				break;
				case 3:
				tabidx = 5;
				break;
				case 4:
				tabidx = 4;
				break;
				case 5:
				tabidx = 6;
				break;
				case 6:
				tabidx = 1;
				break;
				case 7:
				tabidx = 2;
				break;				 
			}
			
			
			
			const params ={
				productType:tabidx,
				loanType:this.param1[this.selparam1].dictKey,
				financingPeriod:this.param2[this.selparam2].dictKey,
				financingLimit:this.param3[this.selparam3].dictKey,
				interestRate:this.param4[this.selparam4].dictKey,
				hot:this.param5[this.selparam5].dictKey,
				repayment:this.param6[this.selparam6].dictKey}
		
			rzproductlist(params).then(data => {
				this.contentList[this.current].list = data.data.records;
				this.contentList[this.current].pages = data.data.pages;
								
				this.contentList[this.current].list= this.contentList[this.current].list.map((item)=>{           
				            //利率范围             
				            //还款方式        
				            //产品热度
				            switch (item.hot) {
				                case '1':
				                    item.shot="★"
				                    break;
				                case '2':
				                    item.shot="★★"
				                    break;
				                case '3':
				                    item.shot="★★★"
				                    break;
				                case '4':
				                    item.shot="★★★★"
				                    break;
				                case '5':
				                    item.shot="★★★★★"
				                    break;
				            }
				            return item;
				        })                 
				console.log(" data.data data.data data.data", data.data);
			})
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({
				success(e) {
					console.log(e);
					let {
						windowWidth,
						windowHeight,
						safeArea
					} = e;
					const query = uni.createSelectorQuery().in(that);
					query
						.select('#swiperBox')
						.boundingClientRect(data => {
							that.swiperHeight = safeArea.bottom - data.top;
						})
						.exec();
				}
			});
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1500);
		},
		methods: {
			slect1(index) {
				this.selparam1 = index;
				this.calldata();
			},
			slect2(index) {
				this.selparam2 = index;
				this.calldata();
			},
			slect3(index) {
				this.selparam3 = index;
				this.calldata();
			},
			slect4(index) {
				this.selparam4 = index;
				this.calldata();
			},
			slect5(index) {
				this.selparam5 = index;
				this.calldata();
			},
			slect6(index) {
				this.selparam6 = index;
				this.calldata();
			},
			calldata(){
				let tabidx=1;
				switch(this.current){
					case 0:
					tabidx = 7;
					break;
					case 1:
					tabidx = 8;
					break;
					case 2:
					tabidx = 3;
					break;
					case 3:
					tabidx = 5;
					break;
					case 4:
					tabidx = 4;
					break;
					case 5:
					tabidx = 6;
					break;
					case 6:
					tabidx = 1;
					break;
					case 7:
					tabidx = 2;
					break;				 
				}
				
				
				
				const params ={
					productType:tabidx,
					loanType:this.param1[this.selparam1].dictKey,
					financingPeriod:this.param2[this.selparam2].dictKey,
					financingLimit:this.param3[this.selparam3].dictKey,
					interestRate:this.param4[this.selparam4].dictKey,
					hot:this.param5[this.selparam5].dictKey,
					repayment:this.param6[this.selparam6].dictKey}
						
				rzproductlist(params).then(data => {
					this.contentList[this.current].list = data.data.records;
					this.contentList[this.current].pages = data.data.pages;
									
					this.contentList[this.current].list= this.contentList[this.current].list.map((item)=>{           
					            //利率范围             
					            //还款方式        
					            //产品热度
					            switch (item.hot) {
					                case '1':
					                    item.shot="★"
					                    break;
					                case '2':
					                    item.shot="★★"
					                    break;
					                case '3':
					                    item.shot="★★★"
					                    break;
					                case '4':
					                    item.shot="★★★★"
					                    break;
					                case '5':
					                    item.shot="★★★★★"
					                    break;
					            }
					            return item;
					        })                  
				})
			},
			tabsChange(e) {
				this.current = e.detail.current;
				this.param1= [{
					dictKey: '',
					dictValue: '全部'
				}];
				let scode ="";
				switch(this.current){
					case 0:
						scode='dkfw';
					break;
					case 1:
						scode='dbfw';
					break;
					case 2:
						scode='blfw';
					break;
					case 3:
						scode='gylfw';
					break;
					case 4:
						scode='gqzyfw';
					break;
					case 5:
						scode='sbzlfw';
					break;
					case 6:
						scode='xrph';
					break;
					case 7:
						scode='xrdg';
					break;
					
				};
				rzdict({ code: scode }).then(res => {						 
				    const data = res.data;    					
						let allitems=[];
				       data.forEach((item)=>{
				           console.log(`output->item`,item)
				           allitems.push(item.dictKey);
				       })         
					   this.param1 = this.param1.concat(data);
				       this.param1[0].dictKey = allitems.join(',');   
				   });
				
				 
				this.param1=[{
						dictKey: '',
						dictValue: '全部'
					}];
				 
				
				let tabidx=1;
				switch(this.current){
					case 0:
					tabidx = 7;
					break;
					case 1:
					tabidx = 8;
					break;
					case 2:
					tabidx = 3;
					break;
					case 3:
					tabidx = 5;
					break;
					case 4:
					tabidx = 4;
					break;
					case 5:
					tabidx = 6;
					break;
					case 6:
					tabidx = 1;
					break;
					case 7:
					tabidx = 2;
					break;				 
				}
				
				
				
				const params ={
					productType:tabidx,
					loanType:this.param1[this.selparam1].dictKey,
					financingPeriod:this.param2[this.selparam2].dictKey,
					financingLimit:this.param3[this.selparam3].dictKey,
					interestRate:this.param4[this.selparam4].dictKey,
					hot:this.param5[this.selparam5].dictKey,
					repayment:this.param6[this.selparam6].dictKey}
						
				rzproductlist(params).then(data => {
					this.contentList[this.current].list = data.data.records;
					this.contentList[this.current].pages = data.data.pages;
									
					this.contentList[this.current].list= this.contentList[this.current].list.map((item)=>{           
					            //利率范围             
					            //还款方式        
					            //产品热度
					            switch (item.hot) {
					                case '1':
					                    item.shot="★"
					                    break;
					                case '2':
					                    item.shot="★★"
					                    break;
					                case '3':
					                    item.shot="★★★"
					                    break;
					                case '4':
					                    item.shot="★★★★"
					                    break;
					                case '5':
					                    item.shot="★★★★★"
					                    break;
					            }
					            return item;
					        })                  
				})
			},
			refresherrefresh(index) {
				console.log('自定义下拉刷新被触发');
				let _this = this;
				if (_this.tabs[index]._triggered) {
					return;
				}
				_this.tabs[index]._triggered = true;
				//界面下拉触发，triggered可能不是true，要设为true
				if (!_this.tabs[index].triggered) {
					_this.tabs[index].triggered = true;
				}
				
			   
				 
				 let tabidx=1;
				 switch(this.current){
				 	case 0:
				 	tabidx = 7;
				 	break;
				 	case 1:
				 	tabidx = 8;
				 	break;
				 	case 2:
				 	tabidx = 3;
				 	break;
				 	case 3:
				 	tabidx = 5;
				 	break;
				 	case 4:
				 	tabidx = 4;
				 	break;
				 	case 5:
				 	tabidx = 6;
				 	break;
				 	case 6:
				 	tabidx = 1;
				 	break;
				 	case 7:
				 	tabidx = 2;
				 	break;				 
				 }
				 
				 
				 
				 const params ={
				 	productType:tabidx,
				 	loanType:this.param1[this.selparam1].dictKey,
				 	financingPeriod:this.param2[this.selparam2].dictKey,
				 	financingLimit:this.param3[this.selparam3].dictKey,
				 	interestRate:this.param4[this.selparam4].dictKey,
				 	hot:this.param5[this.selparam5].dictKey,
				 	repayment:this.param6[this.selparam6].dictKey}
				 		
				 rzproductlist(params).then(data => {
				 	this.contentList[this.current].list = data.data.records;
				 	this.contentList[this.current].pages = data.data.pages;
				 					
				 	this.contentList[this.current].list= this.contentList[this.current].list.map((item)=>{           
				 	            //利率范围             
				 	            //还款方式        
				 	            //产品热度
				 	            switch (item.hot) {
				 	                case '1':
				 	                    item.shot="★"
				 	                    break;
				 	                case '2':
				 	                    item.shot="★★"
				 	                    break;
				 	                case '3':
				 	                    item.shot="★★★"
				 	                    break;
				 	                case '4':
				 	                    item.shot="★★★★"
				 	                    break;
				 	                case '5':
				 	                    item.shot="★★★★★"
				 	                    break;
				 	            }
				 	            return item;
				 	        })                 
				 	console.log(" data.data data.data data.data", data.data);
				 })

				setTimeout(() => {
					_this.tabs[index].triggered = false; //触发onRestore，并关闭刷新图标
					_this.tabs[index]._triggered = false;
				}, 10);

				setTimeout(() => {
					_this.tabs[index].triggered = false; //触发onRestore，并关闭刷新图标
					_this.tabs[index]._triggered = false;
				}, 10);
			},
			refresherrestore(index) {
				console.log('自定义下拉刷新被复位');
				let _this = this;
				_this.tabs[index].triggered = false;
				_this.tabs[index]._triggered = false;
			},
			refresherabort(index) {
				console.log('自定义下拉刷新被中止	');
				let _this = this;
				_this.tabs[index].triggered = false;
				_this.tabs[index]._triggered = false;
			},
			change(index) {
				this.current = index.index;
				// this.refresherrefresh(index);
			
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				let current = this.current;
				if (this.contentList[current].page >= 3) return;
				this.contentList[current].status = 'loading';



				setTimeout(() => {
					/* 	this.contentList[current].page = ++this.contentList[current].page;
						this.contentList[current].list += 10;
						if (this.contentList[current].page >= 3)
							this.contentList[current].status = 'nomore';
						else this.contentList[current].status = 'loading'; */

					let tabidx=1;
					switch(this.current){
						case 0:
						tabidx = 7;
						break;
						case 1:
						tabidx = 8;
						break;
						case 2:
						tabidx = 3;
						break;
						case 3:
						tabidx = 5;
						break;
						case 4:
						tabidx = 4;
						break;
						case 5:
						tabidx = 6;
						break;
						case 6:
						tabidx = 2;
						break;
						case 7:
						tabidx = 1;
						break;				 
					}
					
					
					
					const params ={
						productType:tabidx,
						loanType:this.param1[this.selparam1].dictKey,
						financingPeriod:this.param2[this.selparam2].dictKey,
						financingLimit:this.param3[this.selparam3].dictKey,
						interestRate:this.param4[this.selparam4].dictKey,
						hot:this.param5[this.selparam5].dictKey,
						repayment:this.param6[this.selparam6].dictKey}
				 
					
					console.log(this.contentList[this.current].page, this.contentList[this.current].pages)

					if (this.contentList[this.current].page >= this.contentList[this.current].pages)
						this.contentList[current].status = 'nomore';
					else
						this.contentList[current].status = 'loading';


					if (this.contentList[this.current].page >= this.contentList[this.current].pages) return;
					
					rzproductlist(params).then(data => {
						this.contentList[this.current].list = data.data.records;
						this.contentList[this.current].pages = data.data.pages;
										
						this.contentList[this.current].list= this.contentList[this.current].list.map((item)=>{           
						            //利率范围             
						            //还款方式        
						            //产品热度
						            switch (item.hot) {
						                case '1':
						                    item.shot="★"
						                    break;
						                case '2':
						                    item.shot="★★"
						                    break;
						                case '3':
						                    item.shot="★★★"
						                    break;
						                case '4':
						                    item.shot="★★★★"
						                    break;
						                case '5':
						                    item.shot="★★★★★"
						                    break;
						            }
						            return item;
						        })                 
						console.log(" data.data data.data data.data", data.data);
					})

				}, 2000);
			},

		}
	};
</script>

<style lang="scss">
	.btn {
		white-space: nowrap;
		margin-right: 10rpx;
		padding: 0rpx 20rpx 0rpx 20rpx;
		border-radius: 28rpx;
	}

	.btn1 {
		white-space: nowrap;
		margin-right: 10rpx;
		padding: 0rpx 20rpx 0rpx 20rpx;
		border-radius: 28rpx;
		color: #FA612C;
	}

	.activebtn {
		white-space: nowrap;
		margin-right: 10rpx;
		padding: 0rpx 20rpx 0rpx 20rpx;
		border-radius: 28rpx;
		color: #FFF;
		background-color: #1057FC;
	}

	.message-icon {
		width: 32rpx;
		height: auto;
		margin-right: 27rpx;
	}

	.tab {
		margin: 0 0 10rpx;
		border-bottom: 1px solid #e4e7ed;
	}

	.content {
		padding: 0 0 150rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;

		.news {
			&:not(:last-of-type) {
				border-bottom: 2rpx solid #e4e7ed;
			}
		}
	}

	.nomore {
		padding: 30rpx 20rpx;
	}

	 

	.swiper-box {
		height: 100vh;
	}

	.news-list {
		margin-top: 30rpx;
		.lab{
			color:#FA612C; 
			font-weight: bold;   
			white-space: nowrap;
			text-align: center;
		} 
		.news-item {
			&:not(:last-of-type) {
				padding: 0 0 30rpx;
				margin-bottom: 30rpx;
				border-bottom: 1px solid #eeeeee;
			}
			
			display: flex;
			align-items: center;
			justify-content: space-between; 
			.left {
				flex: 1;
				height: 160rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;	 
				.atag{
				 	font-size: 28rpx;
				 	line-height: 50rpx;
				 	font-family: PingFang SC;
				 	font-weight: bold;
				 	color: #212121;
				 }
				.info {
					min-width: 0;
					padding-right: 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;

					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #212121;
					line-height: 36rpx;
				}

				.date {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-right: 20rpx;
				 
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #a6abb5;
				}
			}

			.img {
				flex-shrink: 0;
				width: 252rpx;
				height: 120rpx;
				border-radius: 20rpx;
				background-color: #dddddd; 
				margin-right: 20rpx;
			}
		}
	}
</style>